<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <script src="../libs/dat.gui.min.js" type="text/javascript"></script>
    <link href="../css/dat-gui-light-style.css" rel="stylesheet"/>
    <style>

        /* ----------------------------------------------------------------------------------------------------------*/
        /* ContextMenu */
        /* ----------------------------------------------------------------------------------------------------------*/

        .xeokit-context-menu {
            font-family: 'Roboto', sans-serif;
            font-size: 15px;
            display: none;
            z-index: 300000;
            background: rgba(255, 255, 255, 0.46);
            border: 1px solid black;
            border-radius: 6px;
            padding: 0;
            width: 200px;
        }

        .xeokit-context-menu ul {
            list-style: none;
            margin-left: 0;
            padding: 0;
        }

        .xeokit-context-menu-item {
            list-style-type: none;
            padding-left: 10px;
            padding-right: 20px;
            padding-top: 4px;
            padding-bottom: 4px;
            color: black;
            background: rgba(255, 255, 255, 0.46);
            cursor: pointer;
            width: calc(100% - 30px);
        }

        .xeokit-context-menu-item:hover {
            background: black;
            color: white;
            font-weight: normal;
        }

        .xeokit-context-menu-item span {
            display: inline-block;
        }

        .xeokit-context-menu .disabled {
            display: inline-block;
            color: gray;
            cursor: default;
            font-weight: normal;
        }

        .xeokit-context-menu .disabled:hover {
            color: gray;
            cursor: default;
            background: #eeeeee;
            font-weight: normal;
        }

        .xeokit-context-menu-item-separator {
            background: rgba(0, 0, 0, 1);
            height: 1px;
            width: 100%;
        }

        

    </style>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <h1>ContextMenu</h1>
    <h2>Sub-menus</h2>
    <p>This example shows a two-level context menu whenever we right-click on the model. Note how the menu options
        lead to sub-menus.</p>
    <h3>Stats</h3>
    <ul>
        <li>
            <div id="time">Loading JavaScript modules...</div>
        </li>
    </ul>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/extras/ContextMenu/ContextMenu.js~ContextMenu.html"
               target="_other">ContextMenu</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
               target="_other">XKTLoaderPlugin</a>
        </li>
    </ul>
    <h3>Resources</h3>
    <ul>
        <li>
            <a href="https://github.com/openBIMstandards/DataSetSchependomlaan"
               target="_other">Model source</a>
        </li>
    </ul>
</div>
</body>
<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {Viewer, XKTLoaderPlugin, ContextMenu} from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer, arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.camera.eye = [-2.56, 8.38, 8.27];
    viewer.camera.look = [13.44, 3.31, -14.83];
    viewer.camera.up = [0.10, 0.98, -0.14];

    viewer.cameraControl.panRightClick = false; // Prevents right-click-drag panning interfering with ContextMenus

    viewer.scene.xrayMaterial.fill = true;
    viewer.scene.xrayMaterial.fillAlpha = 0.1;
    viewer.scene.xrayMaterial.fillColor = [0, 0, 0];
    viewer.scene.xrayMaterial.edgeAlpha = 0.3;
    viewer.scene.xrayMaterial.edgeColor = [0, 0, 0];

    viewer.scene.highlightMaterial.fill = true;
    viewer.scene.highlightMaterial.edges = true;
    viewer.scene.highlightMaterial.fillAlpha = 0.1;
    viewer.scene.highlightMaterial.edgeAlpha = 0.1;
    viewer.scene.highlightMaterial.edgeColor = [1, 1, 0];

    //------------------------------------------------------------------------------------------------------------------
    // Create ContextMenu for right-click on an Entity
    //------------------------------------------------------------------------------------------------------------------

    const objectContextMenu = new ContextMenu({

        items: [

            [ // Group

                // Per-object emphasis effects

                { // Item

                    getTitle: (context) => {
                        return "Effects";
                    },

                    doAction: function (context) {
                        // Does nothing
                    },

                    items: [ // Sub-menu

                        [ // Group

                            // Show/hide object

                            {
                                getTitle: (context) => {
                                    return (!context.entity.visible) ? "Show Object" : "Hide Object";
                                },

                                doAction: function (context) {
                                    context.entity.visible = !context.entity.visible;
                                }
                            },

                            //Select/deselect object

                            {
                                getTitle: (context) => {
                                    return (!context.entity.selected) ? "Select Object" : "Undo Select Object";
                                },

                                doAction: function (context) {
                                    context.entity.selected = !context.entity.selected;
                                }
                            },

                            // Highlight/unhighlight object

                            {
                                getTitle: (context) => {
                                    return (!context.entity.highlighted) ? "Highlight Object" : "Undo Highlight Object";
                                },

                                doAction: function (context) {
                                    context.entity.highlighted = !context.entity.highlighted;
                                }
                            }
                        ]
                    ]
                },

                // Camera navigation

                {
                    getTitle: (context) => {
                        return "Camera";
                    },

                    doAction: function (context) {

                    },

                    items: [ // Submenu
                        [ // Group
                            {
                                title: "Fly to Object",
                                doAction: function (context) {
                                    const viewer = context.viewer;
                                    const entity = context.entity;
                                    viewer.cameraFlight.flyTo({
                                        aabb: entity.aabb,
                                        duration: 0.5
                                    }, () => {
                                    });
                                }
                            },
                            {
                                title: "Jump to Object",
                                doAction: function (context) {
                                    const viewer = context.viewer;
                                    const entity = context.entity;
                                    viewer.cameraFlight.jumpTo({
                                        aabb: entity.aabb
                                    });
                                }
                            }
                        ]
                    ]
                }
            ]
        ],

        enabled: true
    });

    const getCanvasPosFromEvent = function (event) {
        const canvasPos = [];
        if (!event) {
            event = window.event;
            canvasPos[0] = event.x;
            canvasPos[1] = event.y;
        } else {
            let element = event.target;
            let totalOffsetLeft = 0;
            let totalOffsetTop = 0;
            let totalScrollX = 0;
            let totalScrollY = 0;
            while (element.offsetParent) {
                totalOffsetLeft += element.offsetLeft;
                totalOffsetTop += element.offsetTop;
                totalScrollX += element.scrollLeft;
                totalScrollY += element.scrollTop;
                element = element.offsetParent;
            }
            canvasPos[0] = event.pageX + totalScrollX - totalOffsetLeft;
            canvasPos[1] = event.pageY + totalScrollY - totalOffsetTop;
        }
        return canvasPos;
    };

    viewer.scene.canvas.canvas.addEventListener('contextmenu', (event) => {
        const canvasPos = getCanvasPosFromEvent(event);
        const hit = viewer.scene.pick({
            canvasPos
        });
        if (hit && hit.entity.isObject) {
            objectContextMenu.context = { // Must set context before showing menu
                viewer,
                entity: hit.entity
            };
            objectContextMenu.show(event.pageX, event.pageY);
        }
        event.preventDefault();
    });

    //----------------------------------------------------------------------------------------------------------------------
    // Load a model
    //----------------------------------------------------------------------------------------------------------------------

    const xktLoader = new XKTLoaderPlugin(viewer);

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../../assets/models/xkt/v8/ifc/Schependomlaan.ifc.xkt",
        edges: true,
        excludeUnclassifiedObjects: false
    });

    const t0 = performance.now();
    document.getElementById("time").innerHTML = "Loading model...";
    sceneModel.on("loaded", function () {
        const t1 = performance.now();
        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
    });

    window.menu = objectContextMenu;

</script>
</html>
